<!DOCTYPE html>
<html style="height:100%;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>div width resize</title>
    <style type="text/css">
        div,body,html{margin:0; padding:0; width:100%;}
        #left,#right,#middle{ height:300px; position:absolute;}
        #left{width:300px; background:#ccc;}
        #middle{ width:9px; background:#666;left:300px;}
        #middle:hover{ cursor:w-resize;}
        #right{right:0; background:#ccc; left:309px; width:auto;}
    </style>
</head>
<body style="padding: 0; margin: 0;">
<div id="left">左侧内容</div>
<div id="middle"></div>
<div id="right">
    右侧内容
</div>
    <script>
        function $(id) {
            return document.getElementById(id)
        }
        window.onload = function() {
            left = $("left"), right = $("right"), middle = $("middle");
            var middleWidth=9;
            middle.onmousedown = function(e) {
                var disX = (e || event).clientX;
                middle.left = middle.offsetLeft;
                document.onmousemove = function(e) {
                    var iT = middle.left + ((e || event).clientX - disX);
                    var e=e||window.event,tarnameb=e.target||e.srcElement;
                    maxT=document.body.clientWidth;
                    iT < 0 && (iT = 0);
                    iT > maxT && (iT = maxT);
                    middle.style.left = left.style.width = iT + "px";
                    right.style.width = document.body.clientWidth - iT -middleWidth + "px";
                    right.style.left = iT+middleWidth+"px";
                    return false
                };
                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    middle.releaseCapture && middle.releaseCapture()
                };
                middle.setCapture && middle.setCapture();
                return false
            };
        };
    </script>
</body>
</html>